<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/baiduTemplate.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*获得所有的城市信息*/
			$(function() {
				$.getJSON("data/city.json", function(dataInfo) {
					var bt = baidu.template;
					var html = bt('tpl', dataInfo);
					$("#content").html(html);
				});
			})
			/*根据城市的代码获得天气预报的json*/
			function showInfo(code) {
				var urls = "weather/retrofit/" + code;

				$.getJSON(urls, function(jsonData) {　　　　
					if(jsonData.status=="0"){
						alert("查询失败")
					}
					else{
						var bt = baidu.template;
						var html=bt('infoTpl',jsonData.data);
						$("#info").html(html);
					}
				});
			}
		</script>
	</head>

	<body>
		<script id="tpl" type="text/template">
			<select>
				<% for(var i=0;i<data.length;i++) {%>
				<option value="<%=data[i].code%>" onclick="showInfo(<%=data[i].code%>)">
					<%=data[i].name%>
				</option>
				<%}%>
			</select>
		</script>
		<script id="tpl2" type="text/template">
			<select>
				<option value="<%=code%>" onclick="showInfo('<%=code%>\')">
					<%=name%>
				</option>
			</select>
		</script>
		<div id="content">

		</div>
		<script id="infoTpl" type="text/template">
			<table border="" cellspacing="" cellpadding="">
				<tr>
					<th>项目</th>
					<th>内容</th>
				</tr>
				<tr>
					<td>城市</td>
					<td><%=weatherinfo.city%></td>
				</tr>
				<tr>
					<td>最低温度</td>
					<td><%=weatherinfo.temp1%></td>
				</tr>
				<tr>
					<td>最高温度</td>
					<td><%=weatherinfo.temp2%></td>
				</tr>
				<tr>
					<td>天气</td>
					<td><%=weatherinfo.weather%></td>
				</tr>
			</table>
		</script>
		
		<div id="info">
			
		</div>
	</body>

</html>